<template>
  <div id='wrap'>
    <!-- 父传子 子传父 插槽 -->
    <h1>传值插槽案例</h1>

    <div class="group">
      <demo4 :foot :slist="list">
        <template #gridbox="{ item }">
          <div>
            <h4>{{ item.title }}</h4>
            <p>{{ item.descript }}</p>
          </div>
        </template>
      </demo4>
    </div>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'vue',
}
</script>

<script lang='ts' setup>
import { ref, onMounted, provide, type Ref } from 'vue';
import demo4 from './components/demo4.vue';
import { type IDdemo } from '@/service/types/demo4Types';
import { getList } from '@/service/day1226/demo4Data';
import { myInjectionkey } from './components/keys';
const foot = ref('蛋糕')
const list = ref<IDdemo[]>([])
onMounted(async () => {
  //使用钩子函数 挂载前使用异步函数完成数据请求
  list.value = await getList();
})

// 跨层级传递数据 组级
const heshibi = ref('爷爷传的和氏璧')
// provide('heshibi', heshibi)
provide<{ heshibi: Ref<string> }>(myInjectionkey, { heshibi })
provide('foo', { name: '咪咪' })
</script>

<style lang='scss'>
@use '@/assets/common.scss';
</style>
